<template>
  <div class="layout">
    <Header :type="'content'" />
    <div class="content-box">
      <div class="content-title flex">
        <div class="title">欢迎使用诊间支付终端</div>
      </div>
      <div class="boxItem">
          <div class="boxItem-box">
            <div class="titleT">入院登记</div>
            <div class="tipT">登记患者信息</div>
          </div>
          <div class="boxItem-box">
            <div class="titleT">出院结算</div>
            <div class="tipT">结算住院费用</div>
          </div>
          <div @click="toPath()" class="boxItem-box boxItem-right">
            <div class="titleT">住院预交</div>
            <div class="tipT">预交住院费用</div>
          </div>
          <div @click="toList()" class="boxItem-box">
            <div class="titleT">清单查询</div>
            <div class="tipT">查询住院清单</div>
          </div>
          <div class="boxItem-box">
            <div class="titleT">物价查询</div>
            <div class="tipT">项目、药品查询</div>
          </div>
      </div>
    </div>
    <footer class="footer">
        <div class="text">编号:MU000008</div>
        <div class="text">版本:V5.0.2202.2827</div>
    </footer>
  </div>
</template>
<script>
const Header = () => import("@/views/components/Header");
const Foot = () => import("@/views/components/Foot");
export default {
  components: { Header, Foot },
  data() {
    return {
        
        
    };
  },
  computed: {
    title() {
      return "";
    }
  },
  created() {
    console.log(this.$route.meta, "router");
  },
  methods: {
    toPath() {
      this.$router.push("/hospitalNum")
    },
    toList(){
      this.$router.push("/searchType")
    }
  }
};
</script>
<style lang="scss" scoped>
.layout {
  height: 100%;
  background: linear-gradient(0deg, #f0f6ff 0%, #b4d4ff 100%);
  .footer {
    //   position: absolute;
      padding-left: 28px;
      padding-top: 17px;
      .text {
            font-size: 17px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #585D69;
            line-height: 21px;
            margin-bottom: 3px;
      }

  }
  .content-box {
    // overflow-y: auto;
    padding: 17px 28px 0 28px;
    box-sizing: border-box;
  }
  .content-title {
    height: 57px;
    line-height: 57px;
  }
  .title {
    width: 427px;
    height: 57px;
    background: url("./../../assets/home/icon-1.png") no-repeat;
    background-size: 427px 57px;
    font-size: 28px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #8e3c00;
    padding-left: 18px;
  }
  .personal-info {
    font-size: 26px;
    flex: 1;
    padding-left: 28px;
    box-sizing: border-box;
    .name {
      color: #ff8c38;
      margin-right: 20px;
      font-weight: 500;
    }
  }
.boxItem {
  width: 100%;
  height: 524px;
  background:#ccc;
  background: linear-gradient(0deg, #f3f9ff 0%, #deedff 100%);
  box-shadow: 0px 0px 14px 0px rgba(56, 141, 255, 0.2);
  border-radius: 0px 14px 14px 14px;
  padding: 45px 50px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.boxItem-box{
  width: 340px;
  height: 189px;
  background: #fecc54;
  border: 3px solid #ffffff;
   opacity: 0.8;
   border-radius: 11px;
   margin-bottom: 44px;
   margin-right: 60px;
   box-sizing: border-box;
   padding: 20px 40px;
}
.boxItem-box:nth-child(2){
  background: #ac74eb;
}
.boxItem-right{
  //  margin-right:0px;
   background: #f99278;
}
.boxItem-box:nth-child(4){
  background: #49bba1;
}
.boxItem-box:nth-child(5){
  background: #3f89ef;
}
.titleT {
       font-size: 37px;
       font-family: Adobe Heiti Std;
       font-weight: normal;
       color: #fff;
     }
     .tipT {
       margin-top: 18px;
       font-size: 27px;
       font-family: Adobe Heiti Std;
       font-weight: normal;
       color: #fff;
     }
}
</style>